<template>
  <div id="container"></div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted } from 'vue';

import { getCity } from '../../api/map';

let map = null;

onMounted(() => {
  AMapLoader.load({
    key: '27b3a6a6945acce9aa1bdbf9926eeae5', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 在这里配置后不生效，why？
  })
    .then(async (AMap) => {
      map = new AMap.Map('container', {
        pitch: 50, // 地图俯仰角度，有效范围 0 度- 83 度
        viewMode: '3D', // 地图模式
        rotateEnable: true, // 是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, // 是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 17, // 初始化地图层级
        rotation: -15, // 初始地图顺时针旋转的角度
        zooms: [2, 20], // 地图显示的缩放级别范围
        center: [116.333926, 39.997245], // 初始地图中心经纬度
        terrain: true, // 开启地形图
      });
      // 工具条
      AMap.plugin(['AMap.ToolBar'], function () {
        // 在回调函数中实例化插件
        const toolbar = new AMap.ToolBar(); // 创建工具条插件实例
        map.addControl(toolbar); // 添加工具条插件到页面
      });
      // 比例尺
      AMap.plugin(['AMap.Scale'], function () {
        // 在回调函数中实例化插件
        const scale = new AMap.Scale(); // 创建比例尺插件实例
        map.addControl(scale); // 添加比例尺插件到地图实例
      });
      // 罗盘
      AMap.plugin(['AMap.ControlBar'], function () {
        // 在回调函数中实例化插件
        const controlBar = new AMap.ControlBar(); // 创建罗盘插件实例
        map.addControl(controlBar); // 添加罗盘插件到地图实例
      });
      // 获取当前城市
      const res = await getCity();
      console.log(res.data.city);
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style lang="less" scoped>
@import './index.less';
</style>
